import React from 'react';
// 引入页头组件
import PageHeader from '@/components/Pageheader';
import { Button, Table, Tag, Space, message, Input } from 'antd';
import { useEffect, useState, useRef } from 'react';
import MyPagNation from '@/components/Mypagniation';
import { filmData } from '@/api/film'
const Index = () => {
    const { Search } = Input;
    const [filmList, setFilmList] = useState([]);
    const [keyword, setKeyword] = useState('')
    const [page, setPage] = useState(1)
    // 设置总的数据条数
    const [total, setTotal] = useState(0)
    const filmDataFn=(params)=>{
        filmData(params).then((res) => {
            console.log('电影数据', res);
            if (res.data.errNo == 0) {
                setFilmList(res.data.paginate.data)
                setTotal(res.data.paginate.total)
            }
        })
    }
   
    useEffect(() => {
        filmDataFn({ page: page, keyword: keyword })
    }, [])
    // 搜索
    const onSearch = (value) => {
        console.log(value)
        filmList.filter((item)=>{
            item.name.includes(value)
        })
        filmDataFn({ page: page, keyword: value })
    };
    // 这是定义列
    const columns = [
        {
            title: '序号',
            dataIndex: 'id', // 表示该列在数据中对应哪一个字段
            key: 'id', // 唯一索引
            render: (text) => <a>{text}</a>,
        },
        {
            title: '电影院',
            dataIndex: 'name',
            key: 'id',
        },
        {
            title: '所在城市',
            dataIndex: 'city_name',
            key: 'id',
        },
        {
            title: '所在区',
            dataIndex: 'district_name',
            key: 'id',
        },
        {
            title: '具体位置',
            dataIndex: 'address',
            key: 'id',
        },
        {
            title: '状态',
            key: 'id',
            dataIndex: 'status',
            render: (tags) => {
                // tags 就是该列数据对象中对应gender的value值
                return <Tag color={tags == 1 ? 'error' : 'success'}>
                    {tags == 1 ? '暂停营业' : '正常'}
                </Tag>
            }
        },
    ];
    return (
        <div>
            {/* 表头 */}
            <PageHeader title='电影列表'>
                <Search placeholder="输入影院名字" onSearch={onSearch} enterButton style={{
                    width: 200,
                }} />
            </PageHeader>
            {/* 表单 */}
            <Table
                columns={columns}
                pagination={false}
                dataSource={filmList}
                rowKey={(record) => record.id}
            />
            {/* 分页组件 */}
            <MyPagNation page={page} total={total} setPage={setPage}></MyPagNation>
        </div>
    );
}


export default Index;
